<template>
  <div class="refine_history">
    <h2 class="titleblue">历史公告</h2>
    <div class="contant">
      <el-row>
        <el-col :span='4'>
          <label>公告类型</label>
          <el-select clearable v-model="type" class="select-width-100" @change="typeChange">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-col>
        <el-col :span='16'>
				<span v-if='plantabs=="first"'>
					<label>开始时间</label>
					<el-date-picker v-model="publishBeginTime" class="select-width-200" align="right" type="datetime" placeholder="选择日期" :picker-options="pickerOptions1"
                          value-format="yyyy-MM-dd HH:mm:ss" @change="stChange">
					</el-date-picker>
					<label>结束时间</label>
					<el-date-picker v-model="publishEndTime" class="select-width-200" align="right" type="datetime" placeholder="选择日期" :picker-options="pickerOptions2"
                          value-format="yyyy-MM-dd HH:mm:ss" @change="etChange">
					</el-date-picker>
				</span>
          <div v-else>
            <label>发送时间</label>
            <el-date-picker v-model="sendTime" align="right" type="datetime" placeholder="选择日期" :picker-options="pickerOptions1" value-format="yyyy-MM-dd HH:mm:ss"
                            @change="stChange">
            </el-date-picker>
          </div>
        </el-col>
        <el-col :span='4'>
          <el-input prefix-icon="el-icon-search" placeholder="搜索公告" v-model="search" clearable @clear="search1" @change="search1" class="plansearch">
            <span slot="append">搜索</span>
          </el-input>
        </el-col>
      </el-row>
      <el-tabs v-model="plantabs" type="card" @tab-click="handleClick">
        <el-tab-pane label="内网公告历史" name="first">
          <data-table :page='currentPage' :head="thead1" :data="tableData1" :actions="['view']"
                      @callback="dataAction"></data-table>
        </el-tab-pane>
        <el-tab-pane label="外网公告历史" name="second">
          <data-table :page='currentPage1' :head="thead2" :data="tableData2" :actions="['view']" @callback="dataAction"></data-table>
        </el-tab-pane>
      </el-tabs>
      <div class="block">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="currentPage" layout="total,prev, pager, next, jumper"
                       :total="totalPage" background v-if="plantabs=='first'">
        </el-pagination>
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange1" :current-page.sync="currentPage1" layout="total,prev, pager, next, jumper"
                       :total="totalPage1" background v-if="plantabs=='second'">
        </el-pagination>
      </div>
    </div>
    <el-dialog title="" :visible.sync="detailDialog" width="80%" class="history-borad-detail" append-to-body>
      <div class="details ">
        <h2 class="titleblue">公告详情</h2>
        <div class="main">
          <el-row>
            <el-col :span="24">
              <div class="grid-content">
                <label>公告类型</label>
                <div class="type-width">{{boradinfo.type}}</div>
              </div>
            </el-col>
          </el-row>
          <el-row v-if="plantabs==='first'">
            <el-col :span="24">
              <div class="grid-content">
                <label>公告主题</label>
                <div class="theme-width">{{boradinfo.title}}</div>
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <div class="grid-content">
                <label>{{plantabs==='first'?'公告正文':'短信内容'}}</label>
                <div class="content-width">{{boradinfo.content}}</div>
              </div>
            </el-col>
          </el-row>
          <el-row v-if='boradinfo.attachments'>
            <el-col :span="24">
              <div class="grid-content">
                <label>附件</label>
                <div class="annex-width">
                  <a class="annex-div" v-for='(item,index) in bgImg' target='_blank' @mouseover="onMouseOver(index)" @mouseout="onMouseOut()"
                     :href="item.url" download="">
                    <!-- <a class="annex-div"> -->
                    <img :src="item.url" />
                    <div class="annext-modal" v-show="active==index">
                      <div class="mask"></div>
                      <img src="@/assets/dowload-icon.png" />
                    </div>
                  </a>
                  <a class="annex-div file-div" v-for='(item,index) in fileImg' target='_blank' :href="item.url" download="item">
                    <div>{{item.name}}</div>
                  </a>
                </div>
              </div>
            </el-col>
          </el-row>
          <el-row :gutter="24">
            <el-col :span="24">
              <div class="grid-content">
                <label>公告来源</label>
                <div class="type-width">{{boradinfo.source}}</div>
              </div>
            </el-col>
          </el-row>
          <el-row v-if="plantabs==='first'">
            <el-col :span="24">
              <div class="grid-content">
                <label>发布日期</label>
                <div class="type-width">{{boradinfo.createTime}}</div>
              </div>
            </el-col>
          </el-row>
          <el-row v-else>
            <el-col :span="24">
              <div class="grid-content">
                <label>发送时间</label>
                <div class="type-width">{{boradinfo.sendTime}}</div>
              </div>
            </el-col>
          </el-row>
          <el-row :gutter="24" style="text-align: center;">
            <el-col :span="24">
              <div class="grid-content">
                <el-button @click="last" class="sure">上一篇</el-button>
                <el-button @click="next" class="cancel">下一篇</el-button>
              </div>
            </el-col>
          </el-row>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import DataTable from '@/components/common/DataTable.vue'
  import * as noticeService from '@/services/NoticeService'
  import dictionaryService from '@/services/DictionaryService'
  import moment from 'moment'
  export default {
    components: {
      'data-table': DataTable,
    },
    data: function () {
      return {
        type: '',
        search: '',
        publishBeginTime: '',
        publishEndTime: '',
        sendTime: "",
        plantabs: 'first',
        totalPage: 1,
        totalPage1: 1,
        active: -1,
        bgImg: [],
        fileImg: [],
        options: [],
        next1:'',
        last1:'',
        pickerOptions1: {
          // disabledDate(time) {
          //     return time.getTime() < Date.now() - 8.64e7;
          // },
          shortcuts: [{
            text: '今天',
            onClick(picker) {
              picker.$emit('pick', new Date());
            }
          }, {
            text: '昨天',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit('pick', date);
            }
          }, {
            text: '一周前',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', date);
            }
          }]
        },
        pickerOptions2: {
          // disabledDate(time) {
          //     return time.getTime() < Date.now() - 8.64e7;

          // },
          shortcuts: [{
            text: '今天',
            onClick(picker) {
              picker.$emit('pick', new Date());
            }
          }, {
            text: '昨天',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit('pick', date);
            }
          }, {
            text: '一周前',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', date);
            }
          }]
        },
        thead1: [{
          name: "公告类型",
          prop: "type",
          width: "200"
        },
          {
            name: "公告主题",
            prop: "title"
          },
          {
            name: "发布时间",
            prop: "createTime",
            width: "200"
          },
        ],
        thead2: [{
          name: "公告类型",
          prop: "type",
          width: "200"
        },
          {
            name: "短信内容",
            prop: "content"
          },
          {
            name: "发送时间",
            prop: "sendTime",
            width: "200"
          },
        ],
        tableData1: [],
        tableData2: [],
        currentPage: 1,
        currentPage1: 1,
        detailDialog: false,
        boradinfo: '',
        gglx: [],

      };
    },
    async mounted() {
      let options = await dictionaryService.find('GGLX');
      this.gglx = options;
      this.options = options.map((option)=>{
        return {
          "label": option.name,
          'value': option.id
        }
      });
      this.reGetData(0);
    },
    methods: {
      dataAction(param) {
        if (param.action === "view") {
          this.detailDialog = true;
          let currentPage;
          if(this.plantabs === 'first'){
            currentPage = this.currentPage;
          }else{
            currentPage = this.currentPage1;
          }
          this.$router.push({ path: "/history-notice", query: { type: 'look', id: param.data.id,index:param.data.index,pageNum:currentPage,searchUrl:this.searchUrl} })
          this.lookGetData();
        }
      },
      lookGetData(str,page){
        this.bgImg = [];
        this.fileImg=[];
        if(page===undefined){
          this.page = (10*parseInt(this.$route.query.pageNum-1))+parseInt(this.$route.query.index);
        }
        noticeService.noticeList({size: 1, page: this.page,query:this.$route.query.searchUrl}).then((res)=>{
          if(res.data.length===0){
            this.$alert(str);
            if(str==='没有下一篇了'){
              this.$alert('没有下一篇了');
              this.page-=1;
              this.lookGetData('没有下一篇了',this.page);
            }
          }
          this.boradinfo = res.data[0];
          this.boradinfo.sendTime = moment(res.data[0].sendTime).format('YYYY-MM-DD HH:mm:ss');
          this.boradinfo.createTime = moment(res.data[0].createTime).format('YYYY-MM-DD HH:mm:ss');
          if(this.boradinfo.attachments){
            var newarr = JSON.parse(this.boradinfo.attachments);
            for(var x of newarr){
              if(x.name.lastIndexOf('jpeg')!=-1||x.name.lastIndexOf('png')!=-1||x.name.lastIndexOf('jpg')!=-1){
                this.bgImg.push(x)
              }else{
                this.fileImg.push(x);
              }
            }
          }
          this.options.forEach((option,k)=>{
            if(this.boradinfo.type===option.value){
              this.boradinfo.type = option.label;
            }
          })
        });
      },
      handleClick(tab, event) {
        this.currentPage = 1
        this.currentPage1 = 1
        this.getData(0)
      },
      handleSizeChange(val) {
        this.reGetData(val - 1);
      },
      handleCurrentChange(val) {
        this.reGetData(val - 1);
      },
      handleCurrentChange1(val) {
        this.reGetData(val - 1);
      },
      search1() {
        this.currentPage = 1
        this.currentPage1 = 1
        this.getData(0)
      },
      getData(num) {
        let searchUrl = '';
        let currentPage;
        if (this.plantabs === 'first') {
          searchUrl = 'releaseFlag==true;intranetFlag==true;';
          currentPage = this.currentPage-1;
        } else {
          searchUrl = 'releaseFlag==true;intranetFlag==false;';
          currentPage = this.currentPage1-1;
        }
        if(this.sendTime&&this.plantabs === 'second'){
          searchUrl = (searchUrl?searchUrl:'')+'sendTime=='+this.sendTime+';';
        }
        if(this.publishBeginTime&&this.plantabs === 'first'){
          searchUrl = (searchUrl?searchUrl:'')+'publishBeginTime=gte='+this.publishBeginTime+';';
        }
        if(this.publishEndTime&&this.plantabs === 'first'){
          searchUrl = (searchUrl?searchUrl:'')+'publishEndTime=lte='+this.publishEndTime+';';
        }
        if(this.type){
          searchUrl = (searchUrl?searchUrl:'')+'type=='+this.type+';';
        }
        if(this.search){
          searchUrl = (searchUrl?searchUrl:'')+'title=like='+this.search+';';
        }
        this.searchUrl = searchUrl;
        noticeService.noticeList({size: 10, page: num,query:searchUrl}).then((res)=>{
          this.oldData = JSON.parse(JSON.stringify(res.data));
          if (this.plantabs == 'first') {
            this.tableData1 = res.data;
            this.tableData1.forEach((item,i)=>{
              item.index = i;
              let createTime = item.createTime;
              item.createTime = createTime?moment(createTime).format('YYYY-MM-DD HH:mm:ss'):'';
              this.options.forEach((option,k)=>{
                if(item.type===option.value){
                  item.type = option.label;
                }
              })
            });
            this.totalPage = parseInt(res.headers['x-total-count'])
          } else {
            this.tableData2 = res.data;
            this.tableData2.forEach((item,i)=>{
              item.index = i;
              let sendTime = item.sendTime;
              item.sendTime = sendTime?moment(sendTime).format('YYYY-MM-DD HH:mm:ss'):'';
              this.options.forEach((option,k)=>{
                if(item.type===option.value){
                  item.type = option.label;
                }
              })
            });
            this.totalPage1 = parseInt(res.headers['x-total-count'])
          }
        });
      },
      reGetData: function (val) {
        this.getData(val)

      },
      typeChange() {
        this.currentPage = 1
        this.currentPage1 = 1
        this.getData(0, this.type)
      },
      stChange() {
        this.currentPage = 1
        this.currentPage1 = 1
        this.getData(0, this.startTime)
      },
      etChange() {
        this.currentPage = 1
        this.currentPage1 = 1
        this.getData(0, this.endTime)
      },
      onMouseOver(id) {
        this.active = id;
      },
      onMouseOut() {
        this.active = -1;
      },
      next(){
        this.page=this.page+1;
        this.lookGetData('没有下一篇了',this.page);
      },
      last(){
        this.page=this.page-1;
        if(this.page<0){
          this.$alert('没有上一篇了');
          this.page=this.page+1;
          //this.lookGetData();
        }else{
          this.lookGetData('没有上一篇了',this.page);
        }
      }
    }
  };
</script>

<style lang="scss">
  .refine_history {
    width: 100%;
    display: inline-block;
    .el-tabs{
      margin-top:20px;
    }
    .el-progress{
      width:80%;
      float: left;
    }
    .number{
      float: left;
      font-size: 12px;
    }
    .select-width-150{
      width:150px !important;
    }
    .select-width-100{
      width:100px !important;
    }
    .select-width-100 input{
      padding:0px 10px;
    }
    .select-width-200{
      width:185px;
      margin-right:10px;
    }
    .select-width-200 input{
      padding-right:10px;
    }
    .el-table tr:nth-child(2n){
      background:#FAFAFA
    }
  }
  .history-borad-detail{
    .details{
      .main{
        padding:20px 130px 100px;
        .el-row{
          margin-bottom:24px;
        }
        .grid-content label{
          width:70px;
          float: left;
          line-height: 34px;
          text-align: right;
          margin-right:10px;
        }
        .grid-content div{
          background-color: #f5f5f5;
          border-radius: 2px;
          border: solid 1px #dddddd;
          float: left;
          font-size: 14px;
          color: #666666;
          padding-left:15px;
          box-sizing: border-box;
          line-height: 34px;

        }
        .type-width{
          width: 220px;
          height: 34px;

        }
        .theme-width{
          width:460px;
          height: 34px;
        }
        .content-width{
          width: 600px;
          height: 86px;
        }
        .annex-width{
          padding:0 !important;
          background-color:transparent !important;
          border:0px !important;
        }
        .annex-div{

          width: 62px;
          height: 64px;
          display: block;
          float: left;
          position: relative;
        }
        .annex-width>.annex-div>img{
          width: 62px;
          height: 64px;
          border-radius: 2px;
          float: left;
          margin-right:10px;
          cursor: pointer;
          position: absolute;
        }
        .mask{
          position: absolute;
          width: 62px;
          height: 64px;
          background-color: #000 !important;
          opacity: 0.3;
          padding-left: 0 !important;
          top: 0;
          left: 0;
          border:0px !important;
        }
        .annext-modal{
          width: 62px;
          height: 64px;
          position: absolute;
          padding-left: 0 !important;
          text-align: center;
          background-color: transparent !important;
          text-align: center;
          line-height: 64px;
        }
        .annext-modal img{
          position: absolute;
          margin-right: 0;
          background-color: transparent;
          width: auto;
          height: auto;
          vertical-align: middle;
          border: none;
          top: 50%;
          margin-top: -11px;
          width: 23px;
          height: 21px;
          margin-left:-10px;
        }
        .file-div div{
          min-width: 200px;
          line-height: 31px;
        }
      }
    }
  }
  @media screen and (max-width:1200px){
    .refine_history{
      .select-width-200{
        width:160px;
      }
      .select-width-100{
        width:80px !important;
      }
      .plansearch{
        width:250px;
      }
      .plansearch input{
        width:170px;
      }
    }
  }
</style>
